<template>
  <div class="setting">
    <el-row :gutter="20" class="first-col">
      <el-col :offset="1">预警设置</el-col>
    </el-row>
    <el-divider></el-divider>
    <span style="padding-left: 30px">
        预警开关
      </span>
    &nbsp;&nbsp;
    <span><el-switch
        v-model="value"
        class="ml-2"
        size="large"
        :before-change="beforeChange"
        :loading="loading1"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
      </span>
    <div class="timeRange">
      <span>预警时间</span>&nbsp;&nbsp;
      <el-time-select
          v-model="startTime"
          :max-time="endTime"
          class="mr-4"
          placeholder="Start time"
          start="00:00"
          step="00:30"
          end="24:00"
      />
      &nbsp;&nbsp;
      <el-time-select
          v-model="endTime"
          :min-time="startTime"
          placeholder="End time"
          start="00:00"
          step="00:30"
          end="24:00"
      />
    </div>
    <div class="slider-demo-block">
      <span class="demonstration">预警阈值</span>
      <el-slider v-model="space" :step="10" max="60" />
    </div>
  </div>
</template>

<style scoped>
.setting {
  margin-left: 260px;
  margin-top: 70px;
  width: 700px;
  height: 400px;
  box-shadow: 0 2px 4px 2px rgb(22, 223, 231);
  border-radius: 4px;
  font-family: "HarmonyOS Sans SC";
  font-size: large;
}

.first-col {
  padding-top: 20px;
}

.timeRange {
  padding-left: 30px;
  padding-top: 20px;
}

.setting.dark {
  box-shadow: 0 2px 4px rgb(255, 255, 255);
}
.slider-demo-block {
  display: flex;
  align-items: center;
  padding-left: 30px;
  padding-top: 10px;
}
.slider-demo-block .el-slider {
  margin-top: 5px;
  margin-right: 160px;
}
.slider-demo-block .demonstration {
  line-height: 60px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}
.slider-demo-block .demonstration + .el-slider {
  flex: 2 0 30%;
}
</style>
<script setup>
import {ref} from 'vue'
import {ElMessage} from "element-plus";
//默认关闭预警
const value = ref(false)

const startTime = ref('')
const endTime = ref('')
const loading1 = ref(false)
const space=ref('')
const beforeChange = () => {
  loading1.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      loading1.value = false
      ElMessage.success('切换成功！')
      return resolve(true)
    }, 1000)
  })
}

</script>

